<template>
  <div class="p-2">
    <!-- 预览任务对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.viewVisible" append-to-body :show-close="false">
      <el-form ref="taskFormRef" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="标题" prop="title">
              <el-input v-model="form.title" placeholder="请输入标题" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目" prop="projectId">
              <el-select v-model="form.projectId" filterable placeholder="请选择" disabled>
                <el-option v-for="([key, value], index) in Object.entries(projectList)" :key="key" :label="value" :value="key"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="需求" prop="requireId">
              <el-select v-model="form.requireId" filterable placeholder="请选择" disabled>
                <el-option v-for="([key, value], index) in Object.entries(requireList)" :key="key" :label="value" :value="key"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="里程碑" prop="milestoneId">
              <el-select v-model="form.milestoneId" filterable placeholder="请选择" disabled>
                <el-option v-for="([key, value], index) in Object.entries(milestoneList)" :key="key" :label="value" :value="key"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="任务类型" prop="taskType">
              <el-select v-model="form.taskType" placeholder="请选择任务类型" disabled>
                <el-option v-for="dict in pm_task_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优先级" prop="priority">
              <el-select v-model="form.priority" placeholder="请选择优先级" disabled>
                <el-option v-for="dict in pm_priorities" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="负责人" prop="owner">
              <el-select v-model="form.owner" filterable placeholder="请选择" disabled>
                <el-option v-for="([key, value], index) in Object.entries(userList)" :key="key" :label="value" :value="key"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开始时间" prop="startDate">
              <el-date-picker
                style="width: 400px"
                clearable
                v-model="form.startDate"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择开始时间"
                readonly
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-select v-model="form.status" placeholder="请选择任务类型" disabled>
                <el-option v-for="dict in pm_task_status" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联人员" prop="roleIds">
              <el-select v-model="form.relatedUsers" filterable multiple placeholder="请选择" disabled>
                <el-option v-for="([key, value], index) in Object.entries(relevanceList)" :key="key" :label="value" :value="key"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="任务标签" prop="tags">
              <el-select v-model="form.tags" filterable placeholder="请选择" disabled>
                <el-option v-for="([key, value], index) in Object.entries(tagList)" :key="key" :label="value" :value="key"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建部门" prop="projectCode">
              <el-input v-model="form.createDeptName" placeholder="请输入创建部门" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="创建者" prop="projectCode">
              <el-input v-model="form.createByName" placeholder="请输入创建者" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间" prop="projectCode">
              <el-input v-model="form.createTime" placeholder="请输入创建时间" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="修改者">
              <el-input v-model="form.updateByName" placeholder="修改者" readonly />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="修改时间">
              <el-input v-model="form.updateTime" placeholder="请输入创建时间" readonly />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="相关图片" class="imageList" v-if="form.files">
          <imageUpload v-model="form.files" />
        </el-form-item>
        <el-form-item label="内容">
          <div class="content" v-html="form.content" @click="showImg($event)"></div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="Back">返 回</el-button>
        </div>
      </template>
    </el-dialog>
    <div class="imgDolg" v-show="imgPreview.show" @click.stop="imgPreview.show = false">
      <i class="Close" id="imgDolgClose" @click.stop="imgPreview.show = false"></i>
      <img @click.stop="imgPreview.show = true" :src="imgPreview.img" style="width: 50%; height: 80%" />
    </div>
  </div>
</template>

<script setup name="Task" lang="ts">
import { listTask, getTask, delTask, addTask, updateTask } from '@/api/pm/task';
import { TaskVO, TaskQuery, TaskForm } from '@/api/pm/task/types';
import { formatDate } from '../../../utils/index';
import api from '@/api/system/user';
import { getUserProfile } from '@/api/system/user';
import { UserVO } from '@/api/system/user/types';
import { useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const state = ref<State>({
  user: {}
});
interface State {
  user: Partial<UserVO>;
}
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { pm_priorities, pm_task_type, pm_task_status } = toRefs<any>(proxy?.useDict('pm_priorities', 'pm_task_type', 'pm_task_status'));
const projectList = ref([]);
const requireList = ref([]);
const milestoneList = ref([]);
const userList = ref([]);

const tagList = ref([]);
const relevanceList = ref([]);
const taskList = ref<TaskVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(false);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const loggedder = ref();

const queryFormRef = ref<ElFormInstance>();
const taskFormRef = ref<ElFormInstance>();

const dialog = reactive<DialogOption>({
  visible: false,
  title: '',
  viewVisible: false
});
const imgPreview = ref({
  img: '', // 存储预览图片的URL
  show: false // 控制模态框的显示状态
});

const initFormData: TaskForm = {
  id: undefined,
  title: undefined,
  projectId: undefined,
  requireId: undefined,
  milestoneId: undefined,
  content: undefined,
  taskType: undefined,
  priority: undefined,
  owner: undefined,
  startDate: undefined,
  files: undefined,
  tags: undefined,
  relatedUsers: undefined,
  status: undefined
};
const data = reactive<PageData<TaskForm, TaskQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 50,
    title: undefined,
    projectId: undefined,
    requireId: undefined,
    milestoneId: undefined,
    taskType: undefined,
    priority: undefined,
    owner: undefined,
    startDate: undefined,
    status: undefined,
    params: {}
  },
  rules: {
    title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
    projectId: [{ required: true, message: '项目id不能为空', trigger: 'change' }],
    // requireId: [
    //   { required: true, message: "需求不能为空", trigger: "change" }
    // ],
    milestoneId: [{ required: true, message: '里程碑id不能为空', trigger: 'change' }],
    taskType: [{ required: true, message: '任务类型不能为空', trigger: 'change' }],
    priority: [{ required: true, message: '优先级不能为空', trigger: 'change' }],
    owner: [{ required: true, message: '负责人不能为空', trigger: 'blur' }],
    startDate: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
    status: [{ required: true, message: '状态不能为空', trigger: 'change' }]
  }
});

const Back = () => {
  router.back();
};

const { queryParams, form, rules } = toRefs(data);
const showImg = (e) => {
  if (e.target.tagName === 'IMG' && e.target.src) {
    imgPreview.value.img = e.target.src; // 更新预览图片的URL
    imgPreview.value.show = true; // 显示模态框
  }
};

const getTypes = async (id: string | number) => {
  loading.value = true;
  const res = await getTask(id);
  res.data.relatedUsers = JSON.parse(res.data.relatedUsers);
  Object.assign(form.value, res.data);
  dialog.viewVisible = true;
  dialog.title = '分享任务';
  const data1 = await api.affiliatePperson('project');
  projectList.value = data1.data;
  const data2 = await api.affiliatePperson('require');
  requireList.value = data2.data;
  const data3 = await api.affiliatePperson('milestone');
  milestoneList.value = data3.data;
  const data4 = await api.affiliatePperson('user');
  userList.value = data4.data;
  relevanceList.value = data4.data;
  const data5 = await api.affiliatePperson('tag');
  tagList.value = data5.data;
};

onMounted(() => {
  getTypes(route.params && (route.params.id as string));
});
</script>

<style scoped>
:deep(img) {
  /* 样式内容 */
  width: 100px;
  height: 100px;
}

:deep(.ql-editor p) {
  display: flex;
  align-items: center;
  /* 水平居中（如果需要） */
  /* 样式内容 */
  width: 100%;
}

:deep(.ql-editor li) {
  display: flex;
  align-items: center;
  /* 水平居中（如果需要） */
  /* 样式内容 */
  width: 100%;
}

:deep(.ql-align-center) {
  display: flex;
  align-items: center;
  /* 水平居中（如果需要） */
  /* 样式内容 */
  width: 100%;
}

.content {
  border: 1px solid #d3d3d3;
  width: 100%;
}

.content img {
  max-width: 20%;
  margin-right: 5px;
  margin-left: 5px;
}

:deep(.content p) {
  display: flex;
  align-items: center;
  /* 水平居中（如果需要） */
  /* 样式内容 */
  width: 100%;
}

a {
  cursor: pointer;
  /* 或者 cursor: hand; 但 pointer 是更标准和推荐的 */
}

.content .ql-syntax {
  white-space: pre-line;
  word-wrap: break-word;
  /* 允许在适当的位置换行 */
  overflow-wrap: break-word;
}

.imgDolg {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.8);
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#imgDolgClose {
  position: fixed;
  top: 25px;
  cursor: pointer;
  right: 4%;
  font-size: 50px;
  color: white;
}

/* 隐藏删除按钮 */
:deep(.imageList .el-upload-list__item-delete) {
  display: none !important;
}

:deep(.imageList .el-icon--close-tip) {
  display: none !important;
}

:deep(.del .el-dialog__headerbtn) {
  display: none !important;
}
</style>
